<!-- frontend/src/components/EncryptForm.vue -->
<template>
  <div class="encrypt-container">
    <div class="file-selector">
      <label>32位密钥：</label>
      <input type="text" v-model="sm4Key" style="width: 300px">
      <button @click="generateRandomKey">生成随机密钥</button>
    </div>
    <div class="file-selector">
      <label>源文件：</label>
      <input type="text" v-model="sourcePath" readonly>
      <button @click="selectSource">浏览文件</button>
    </div>

    <div class="dir-selector">
      <label>保存到：</label>
      <input type="text" v-model="targetDir" readonly>
      <button @click="selectDir">选择目录</button>
    </div>

    <button class="encrypt-btn" @click="startEncrypt" :disabled="!canEncrypt">
      {{ encrypting ? '加密中...' : '开始加密' }}
    </button>

    <div v-if="resultPath" class="result">
      加密文件已保存至：<a @click="openFolder">{{ resultPath }}</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import {  SelectSavePath, SelectSourceFile, EncryptWithTimestamp, GenerateRandomKey } from '../../../wailsjs/go/main/App' // 根据实际路径调整

const sourcePath = ref('')
const targetDir = ref('')
const resultPath = ref('')
const sm4Key = ref('')
const encrypting = ref(false)

const selectSource = async () => {
  sourcePath.value = await SelectSourceFile()
}
const generateRandomKey = async () => {
  sm4Key.value = await GenerateRandomKey()
}

const selectDir = async () => {
  targetDir.value = await SelectSavePath()
}

const startEncrypt = async () => {
  if (!sourcePath.value || !targetDir.value) return

  encrypting.value = true
  try {
    resultPath.value = await EncryptWithTimestamp(
        sourcePath.value,
        targetDir.value,
        sm4Key.value
    )
  } catch (err) {
    alert(`加密失败：${err}`)
  } finally {
    encrypting.value = false
  }
}

const openFolder = () => {
  window.open(`file:///${resultPath.value}`, '_blank')
}

const canEncrypt = computed(() => {
  return sourcePath.value && targetDir.value && !encrypting.value
})
</script>

<style scoped>
/* 添加响应式布局与美观样式 */
.encrypt-container {
  padding: 20px;
  max-width: 600px;
}
.file-selector, .dir-selector {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}
input[readonly] {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
}
button {
  padding: 8px 15px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
.encrypt-btn {
  width: 45%;
  padding: 12px;
  background: #28a745;
  margin-left: 20px;
}
.result {
  margin-top: 15px;
  padding: 10px;
  background: #f8f9fa;
}
</style>